<template>
  <div class="app-container">
    <div class="filter-tools">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="所属产品">
          <el-select
            v-model="filter.product_id"
            placeholder="请选择产品"
            clearable
          >
            <el-option v-for="(data,i) in Products" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属模块">
          <el-select
            v-model="filter.module_id"
            placeholder="请选择模块"
            clearable
          >
            <el-option v-for="(data,i) in Modules" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="要点">
          <el-input
            v-model="filter.point"
            placeholder="point"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="要点说明">
          <el-input
            v-model="filter.point_remark"
            placeholder="point_remark"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="filter.adminer"
            placeholder="负责人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input
            v-model="filter.id"
            placeholder="ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">
            筛选
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table v-loading="dataLoading" :data="dataList" :height="height" border>
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="80"
        />
        <el-table-column label="所属产品/模块" align="200">
          <template slot-scope="scope">
            <div style="font-size:15px;" class="goto" @click="goProduct(scope.row)"><b>产品：{{scope.row.product_name}}</b></div>
            <div style="font-size:15px;"  class="goto" @click="goModule(scope.row)"><b>模块：{{scope.row.module_name}}</b></div>
          </template>
        </el-table-column>
        <el-table-column label="要点" align="200">
          <template slot-scope="scope">
            <div style="font-size:20px;"><b>{{scope.row.point}}</b></div>
          </template>
        </el-table-column>
        <el-table-column label="要点说明" align="200">
          <template slot-scope="scope">
            <div style="font-size:15px;"><b>{{scope.row.point_remark}}</b></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="adminer"
          label="负责人"
          align="center"
        />
        <el-table-column label="时间/人" width="220">
          <template slot-scope="scope">
            <div><b>创建时间:</b>{{scope.row.created_at}}</div>
            <div><b>创建人:</b>{{scope.row.created_adminer}}</div>
            <div><b>更新时间:</b>{{scope.row.updated_at}}</div>
            <div><b>更新人:</b>{{scope.row.updated_adminer}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
              >
                更新
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="filter.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filter.total"
        @size-change="handleSizeChange"
        @current-change="getList"
      ></el-pagination>
    </div>

    <el-dialog title="更新" :visible.sync="dialogStatus" width="900px">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="巡检要点">
          <el-input type="textarea" :rows="4" v-model="formData.point" placeholder="要点" class="filter-item"/>
        </el-form-item>
        <el-form-item label="要点说明">
          <el-input type="textarea" :rows="4" v-model="formData.point_remark" placeholder="要点说明" class="filter-item"/>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input type="textarea" :rows="4" v-model="formData.adminer" placeholder="负责人" class="filter-item"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus = false">取消</el-button>
        <el-button type="primary" @click="saveForm()">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as api from '@/api/randomCheck/pointApi' // API接口
import {moduleAll} from '@/api/randomCheck/moduleApi' // API接口

import {enableCate} from '@/api/project/product' // API接口

export default {
  name: 'randomCheckMain',
  data() {
    return {
      height:this.$baseTableHeight(1),
      filter: {
        id:"",
        page: 1,
        adminer:"",
        module_id:"",
        product_id:"",
        pageSize: 10,
        total: 0,
        note:"",
        created_adminer:"",
        updated_adminer:"",
        point: '',
        point_remark:"",
      },
      dataLoading: true,
      dataList: [],
      dialogStatus:false,
      formData:{},
      Products:{},
      Modules:{},
      topStatus:0,
      inputVisible: false,
      inputValue: ''
    }
  },
  created() {
    this.filter.module_id = this.$route.query.module_id || null
    this.getProduct()
    this.getModule()
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.filter.page = Number(page)
      api.list(this.filter).then((res) => {
        this.dataList = res.data.list
        this.filter.total = res.data.total
        this.dataLoading = false
      })
    },
    getProduct() {
      enableCate().then((res) => {
        this.Products = res.data.list
        this.dataLoading = false
      })
    },
    getModule() {
      moduleAll().then((res) => {
        this.Modules = res.data.list
        this.dataLoading = false
      })
    },

    handleSizeChange(val) {
      this.filter.pageSize = val
      this.getList(1)
    },
    goProduct(data) {
      this.$router.push({path:'/project/productList',query:{product_id:data.product_id}});
    },
    goModule(data) {
      this.$router.push({path:'/randomCheck/randomCheckModule',query:{module_id:data.module_id}});
    },

    handleAdd(){
      this.formData = {
        module_id:'',
        id:'',
        point:'',
        point_remark:'',
        adminer:'',
      },
        this.dialogStatus = true
    },
    handleEdit(data){
      this.formData = {
        module_id:data.module_id,
        id:data.id,
        point:data.point,
        point_remark:data.point_remark,
        adminer:data.adminer,
      }
      this.dialogStatus = true
    },
    saveForm(){
      api.save(this.formData).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
        this.dialogStatus = false
      })
    },
  },

}
</script>

<style>
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.goto:hover{color: #0051ff;}
.goto{
  cursor:pointer
}
</style>


